import React, { useState } from "react";
import style from './style.module.scss'
import { MyNavBar } from "../../../components";
import { useNavigate, useSearchParams } from "react-router-dom";
import { MyPhysicalSignsItem } from "../../../components";

import myIconHeight from '../../../assets/images/icon/common resource/hdpi/my_icon_height_n.png'
import myIconWeight from '../../../assets/images/icon/common resource/hdpi/my_icon_weight_n.png'
import myIconAge from '../../../assets/images/icon/common resource/hdpi/my_icon_age_n.png'
import { useAppSelector } from "../../../store/hooks";
import { updatePerfectUserInfo } from "../../../api/my";
import { Toast } from "react-vant";


const Index: React.FC = () => {
  const navigate = useNavigate()
  let height = useAppSelector((state) => state.user.userInfo.height)
  let weight = useAppSelector((state) => state.user.userInfo.weight)
  let age = useAppSelector((state) => state.user.userInfo.age)
  const userId = useAppSelector((state) => state.user.userInfo.userId)
  const sessionId = useAppSelector((state) => state.user.userInfo.sessionId)


  const onUpdate = async () => {
    const resp = await updatePerfectUserInfo(age, height, weight, userId, sessionId)
    const { message, status } = resp
    if (status === '0000') {
      Toast.success(message)
      navigate(-1)
    }
  }


  return <div className={style.myPhysicalSigns}>
    <MyNavBar
      title="我的体征"
      rightText={
        <button
          className={style.btn}
          onClick={() => onUpdate()}
        >完成</button>}
      style={{ backgroundColor: "#fff", marginBottom: "8px" }}
      onClickLeft={() => navigate(-1)}
    ></MyNavBar>
    <div className={style.myPhysicalSigns_container}>
      <MyPhysicalSignsItem
        url={myIconHeight}
        title="身高"
        unit={'cm'}
        min={50}
        max={250}
        value={height < 50 ? height = 168 : height}
        onChangeAfters={(v) => {
          height = v
        }}
      ></MyPhysicalSignsItem>
      <MyPhysicalSignsItem
        url={myIconWeight}
        title="体重"
        unit={'kg'}
        min={30}
        max={150}
        value={weight < 30 ? weight = 50 : weight}
        onChangeAfters={(v) => { weight = v }}
      ></MyPhysicalSignsItem>
      <MyPhysicalSignsItem
        url={myIconAge}
        title="年龄"
        min={18}
        max={120}
        value={age < 18 ? age = 25 : age}
        onChangeAfters={(v) => { age = v }}
      ></MyPhysicalSignsItem>
    </div>
  </div>;
};

export default Index;
